{% load static %}
<div class="sidebar-content">
    <div class="sidebar-header">
        <h4 class="sidebar-title">
            <i class="glyphicon glyphicon-star"></i> 推荐广告
        </h4>
    </div>
    
    <div class="adv-list">
        {% for adv_item in adv_data %}
            <div class="adv-item">
                <a href="{{ adv_item.detail_url }}" target="_blank" class="adv-link">
                    <div class="adv-content">
                        <div class="adv-image-wrapper">
                            <img src="{{ adv_item.src }}" alt="{{ adv_item.title }}" class="adv-image">
                        </div>
                        <div class="adv-text">
                            <h5 class="adv-title">{{ adv_item.title }}</h5>
                            <p class="adv-desc">{{ adv_item.desc }}</p>
                            <div class="adv-action">
                                <span class="btn btn-primary btn-xs">了解详情</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
</div>

<style>
    .sidebar-content {
        padding: 0;
    }
    
    .sidebar-header {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        padding: 15px;
        margin: -15px -15px 20px -15px;
        border-radius: 8px 8px 0 0;
    }
    
    .sidebar-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .adv-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .adv-item {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        background: #fff;
    }
    
    .adv-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,123,255,0.15);
        border-color: #007bff;
    }
    
    .adv-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }
    
    .adv-link:hover {
        text-decoration: none;
        color: inherit;
    }
    
    .adv-content {
        padding: 12px;
    }
    
    .adv-image-wrapper {
        width: 100%;
        height: 120px;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 10px;
        background: #f8f9fa;
    }
    
    .adv-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .adv-item:hover .adv-image {
        transform: scale(1.05);
    }
    
    .adv-text {
        text-align: center;
    }
    
    .adv-title {
        margin: 0 0 8px 0;
        font-size: 14px;
        font-weight: 600;
        color: #333;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .adv-desc {
        margin: 0 0 12px 0;
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .adv-action {
        margin-top: 8px;
    }
    
    .btn-xs {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    @media (max-width: 768px) {
        .sidebar-header {
            margin: -15px -15px 15px -15px;
        }
        
        .sidebar-title {
            font-size: 15px;
        }
        
        .adv-list {
            gap: 12px;
        }
        
        .adv-image-wrapper {
            height: 100px;
        }
        
        .adv-title {
            font-size: 13px;
        }
        
        .adv-desc {
            font-size: 11px;
        }
    }
    
    @media (max-width: 576px) {
        .adv-image-wrapper {
            height: 80px;
        }
        
        .adv-content {
            padding: 10px;
        }
    }
</style>